前面有两篇文章写了JavaScript对象的一些基础知识。但是，我们所讲解的对象，只是特定的一部分，并不能涵盖全部的JavaScript对象。比如说，我们不论怎样编写代码，都没法绕开Array，实现一个跟原生的数组行为一模一样的对象，这是由于原生数组的底层实现了一个自动随着下标变化的length属性。并且，在浏览器环境中，也无法单纯依靠JavaScript代码实现div对象，只能靠document.createElement来创建。这也说明了JavaScript的对象机制并非简单的属性集合+原型。因此来总结下JS的对象及分类。

JavaScript中的对象分类

可以把对象分成以下几类。

  • 宿主对象（host Objects）：由JavaScript宿主环境提供的对象，它们的行为完全由宿主环境决定。
  • 内置对象（Built-in Objects）：由JavaScript语言提供的对象。
    • 固有对象（Intrinsic Objects ）：由标准规定，随着JavaScript运行时创建而自动创建的对象实例。
    • 原生对象（Native Objects）：可以由用户通过Array、RegExp等内置构造器或者特殊语法创建的对象。
    • 普通对象（Ordinary Objects）：由{}语法、Object构造器或者class关键字定义类创建的对象，它能够被原型继承。

宿主对象

首先我们来看看宿主对象。

JavaScript宿主对象千奇百怪，但是前端最熟悉的无疑是浏览器环境中的宿主了。在浏览器环境中，我们都知道全局对象是window，window上又有很多属性，如document。实际上，这个全局对象window上的属性，一部分来自JavaScript语言，一部分来自浏览器环境。

JavaScript标准中规定了全局对象属性，w3c的各种标准中规定了Window对象的其它属性。宿主对象也分为固有的和用户可创建的两种，比如document.createElement就可以创建一些dom对象。

内置对象·固有对象

固有对象是由标准规定，随着JavaScript运行时创建而自动创建的对象实例。固有对象在任何JS代码执行前就已经被创建出来了，它们通常扮演者类似基础库的角色。我们前面提到的“类”其实就是固有对象的一种。

内置对象·原生对象

我们把JavaScript中，能够通过语言本身的构造器创建的对象称作原生对象。在JavaScript标准中，提供了30多个构造器。按照不同应用场景，可以把原生对象分成了以下几个种类。

通过这些构造器，我们可以用new运算创建新的对象，所以我们把这些对象称作原生对象。几乎所有这些构造器的能力都是无法用纯JavaScript代码实现的，它们也无法用class/extend语法来继承。

这些构造器创建的对象多数使用了私有字段,例如：

  • Error: [[ErrorData]]
  • Boolean: [[BooleanData]]
  • Number: [[NumberData]]
  • Date: [[DateValue]]
  • RegExp: [[RegExpMatcher]]
  • Symbol: [[SymbolData]]
  • Map: [[MapData]]

这些字段使得原型继承方法无法正常工作，所有这些原生对象都是为了特定能力或者性能，而设计出来的“特权对象”

函数对象与构造器对象

前面介绍了对象的一般分类，在JavaScript中，还有一个看待对象的不同视角，这就是用对象来模拟函数和构造器。，JavaScript为这一类对象预留了私有字段机制，并规定了抽象的函数对象与构造器对象的概念。

函数对象的定义是：具有[[call]]私有字段的对象，构造器对象的定义是：具有私有字段[[construct]]的对象。

JavaScript用对象模拟函数的设计代替了一般编程语言中的函数，它们可以像其它语言的函数一样被调用、传参。任何宿主只要提供了“具有[[call]]私有字段的对象”，就可以被 JavaScript 函数调用语法支持。或者可以这样说，任何对象只需要实现[[call]]，它就是一个函数对象，可以去作为函数被调用。而如果它能实现[[construct]]，它就是一个构造器对象，可以作为构造器被调用。

对于为JavaScript提供运行环境的我们来说，只要字段符合，我们在上文中提到的宿主对象和内置对象（如Symbol函数）可以模拟函数和构造器。不过用function关键字创建的函数必定同时是函数和构造器，虽然它们表现出来的行为效果却并不相同。

对于宿主和内置对象来说，它们实现[[call]]（作为函数被调用）和[[construct]]（作为构造器被调用）不总是一致的。比如内置对象 Date 在作为构造器调用时产生新的对象，作为函数时，则产生字符串，见以下代码：

1
2
console.log(new Date); // 1
console.log(Date())

而浏览器宿主环境中，提供的Image构造器，则根本不允许被作为函数调用。

1
2
console.log(new Image); 
console.log(Image());//抛出错误

再比如基本类型（String、Number、Boolean），它们的构造器被当作函数调用，则产生类型转换的效果。

同时，在ES6之后 => 语法创建的函数仅仅是函数，它们无法被当作构造器使用，见以下代码：

1
new (a => 0) // error

对于用户使用 function 语法或者Function构造器创建的对象来说，[[call]]和[[construct]]行为总是相似的，它们执行同一段代码。

1
2
3
4
5
function f(){
    return 1;
}
var v = f(); //把f作为函数调用
var o = new f(); //把f作为构造器调用

因此大致可以认为，它们[[construct]]的执行过程如下：

  • 以 Object.protoype 为原型创建一个新对象；
  • 以新对象为 this，执行函数的[[call]]；
  • 如果[[call]]的返回值是对象，那么，返回这个对象，否则返回第一步创建的新对象。

这样的规则造成了个有趣的现象，如果我们的构造器返回了一个新的对象，那么new创建的新对象就变成了一个构造函数之外完全无法访问的对象，这一定程度上可以实现“私有”。

1
2
3
4
5
6
7
8
9
function cls(){
    this.a = 100;
    return {
        getValue:() => this.a
    }
}
var o = new cls;
o.getValue(); //100
//a在外面永远无法访问到

特殊行为的对象

除了上面介绍的对象之外，在固有对象和原生对象中，有一些对象的行为跟正常对象有很大区别。

它们常见的下标运算（就是使用中括号或者点来做属性访问）或者设置原型跟普通对象不同，这里我简单总结一下。

  • Array：Array的length属性根据最大的下标自动发生变化。
  • Object.prototype：作为所有正常对象的默认原型，不能再给它设置原型了。
  • String：为了支持下标运算，String的正整数属性访问会去字符串里查找。
  • Arguments：arguments的非负整数型下标属性跟对应的变量联动。
  • 模块的namespace对象：特殊的地方非常多，跟一般对象完全不一样，尽量只用于import吧。
  • 类型数组和数组缓冲区：跟内存块相关联，下标运算比较特殊。
  • bind后的function：跟原来的函数相关联。